<template>
  <div class="list-content" v-if="pageFlag">
    <component :is="components" :data="dataList" :class-option="defaultOption">
      <ul>
        <li v-for="(item,index) in dataList" :key="index">
          <span class="li-index">{{ index + 1 }}</span>
          <div class="li-content">
            <div class="content-main">
              <div class="main-zuo">
                <div>
                  <p>物料：</p>
                  <span class="one-span">{{ item.materialName }}</span>
                </div>
                <div>
                  <p>当前库存：</p>
                  <span>{{ item.totalInventory }}</span>
                </div>
                <div>
                  <p>仓库：</p>
                  <span>{{ item.warehouseName }}</span>
                </div>
              </div>
              <span :class="{
                'red-span': item.maxInventory && item.maxInventory < item.totalInventory,
                'green-span': item.minInventory && item.minInventory > item.totalInventory,
              }">{{ item.maxInventory && item.maxInventory < item.totalInventory ? '溢出' : item.minInventory && item.minInventory > item.totalInventory ? '不足' : '正常' }}</span>
            </div>
            <div class="content-border"></div>
          </div>
        </li>
      </ul>
    </component>
  </div>
  <reacquire v-else @click="getData"/>
</template>

<script>
import reacquire from '../../components/reacquire/reacquire.vue';
import {currentGET} from '../../api/modules'
import vueSeamlessScroll from 'vue-seamless-scroll';
export default {
  components: { reacquire },
  data() {
    return {
      pageFlag:false,
      components:vueSeamlessScroll,
      dataList:[],
      defaultOption:{
        ...this.$store.state.setting.defaultOption,
        step: 0,
        limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
        singleHeight: 200,
      }
    };
  },
  filters: {
    
  },
  created() {
    this.getData()
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    getData(){
      currentGET('big3',{
        pageSize:20,
        pageNum:1
      }).then(res=>{
        if (res.success) {
          this.dataList = res.rows
          this.pageFlag = true
          
          const timer = setTimeout(()=>{
            clearTimeout(timer)
            this.defaultOption.step = this.$store.state.setting.defaultOption.step
          },this.$store.state.setting.defaultOption.echartsAutoTime)
        }else{
          this.pageFlag = false
        }
      })
    },
  },
};
</script>
<style lang='scss' scoped>
.list-content{
  margin-top: 10px;
  overflow: hidden;
  width: 80%;
  height: 90%;
  margin: auto;

  li{
    display: flex;
    justify-content: space-around;

    .li-index{
      width: 10%;
    }

    .li-content{
      width: 90%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .content-main{
        display: flex;
        justify-content: space-between;

        .main-zuo{
          width: 300px;
          display: flex;
          flex-wrap: wrap;

          div{
            width: 50%;
            display: flex;
            margin-bottom: 10px;

            p{
              color:gray;
              font-size: 14px;
            }
            span{
              font-size: 15px;
            }

            .one-span{
              color: #01AAFF;
              font-size: 18px;
            }
          }
        }

        .red-span{
          color: red;
        }
        .green-span{
          color: green;
        }
      }

      .content-border{
        width: 100%;
        height: 2px;
        margin-bottom: 12px;
        background-size: cover;
        background-image: url('../../assets/img/zuo_xuxian.png');
      }
    }
  }
}
</style>